<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=pt-BR"></script>
<script type="text/javascript" src="script/validaData.js"></script>
<script type="text/javascript" src="./script/jquery.myPaginator.js"></script>
<script type="text/javascript" src="script/configuraFormConsulta.js"></script>
<script type="text/javascript" src="script/jquery.autocomplete.js"></script>
<script type="text/javascript" src="script/jquery.hashchange.min.js"></script>
<script type="text/javascript" src="script/jquery.easytabs.min.js" ></script>
<script>
    var query = location.search.split('?');
    if (query.length > 1){
        query = query[1].split('&');
        for (var i = 0; i < query.length ;i++ ){
            query[i] = query[i].split('=');
        }
    }
    
    $(function(){
        var options_autocomplete = { serviceUrl:'ajax.php?action=consulta_embarcador' };
        $("#input_embarcador").autocomplete(options_autocomplete);
        
        $('#tab-container').easytabs({animationSpeed: 300});
        
        $(document.consulta_completa).configuraFormConsulta();

        if(query[0][1] == 'carga_visualiza' && query[1][1] != ''){
            $.ajax({
                type: "POST",
                url: "ajax.php?action=carga_consulta_localidade",
                async: true,
                data: {consulta: "CAR_ID="+query[1][1]+"&finalizada=true"},
                dataType: "json",
                success: function(response) {
                    detalhar_carga(0, response.rows[0]);
                }});
            $("#voltar_button").hide();
            $("#inicio_button").show();
        }else{
            executaPaginador();
        }    
        
        
        
    });
    
    function executaPaginador(options){
        if( $("#div_exibe_cargas").data("myPaginator") == undefined){
            var optionsDefault = {
            formulario: document.consulta_localidade,
            url: "ajax.php?action=carga_consulta_localidade",
            click: detalhar_carga,
            conteudo : function(index, row){
                return '<table cellspacing="0" class="table_carga">'+
                        '<tr class="tr_carga"><td class="td_tipo" width="70">Origem:</td><td width="180" style="font-weight: bold">'+row.CAR_ORIGEM+'</td><td class="td_tipo" width="90">Ve&iacute;culo:</td><td width="150">'+row.CAR_VEICULO+'</td><td class="td_tipo" width="50">Data:</td><td>'+row.CAR_DATA_REGISTRO+'</td><td rowspan="4" class="td_logo_cliente" width="100"><img src="imagens/clientes/cliente_100x75.php?id='+row.CLI_ID+'" width="100" height="75" style="vertical-align: middle"/></td></tr>'+
                        '<tr class="tr_carga"><td class="td_tipo" width="70">Destino:</td><td width="180" style="font-weight: bold">'+row.CAR_DESTINO+'</td><td class="td_tipo" width="90">Carroceria:</td><td width="150">'+row.CAR_CARROCERIA+'</td><td class="td_tipo" width="50">Peso:</td><td>'+row.CAR_PESO+'</td></tr>'+
                        '<tr class="tr_carga"><td class="td_tipo" width="70">Produto:</td><td width="180">'+row.CAR_PRODUTO+'</td><td class="td_tipo" width="90">Rastreado:</td><td width="150">'+row.CAR_RASTREADO+'</td><td class="td_tipo" width="50">Valor:</td><td>'+row.CAR_VALOR+'</td></tr>'+
                        '<tr class="tr_carga"><td class="td_tipo" width="70">Especie:</td><td width="180">'+row.CAR_ESPECIE+'</td><td class="td_tipo" width="90">Observa&ccedil;&atilde;o:</td><td colspan="3">'+row.CAR_OBSERVACAO+'</td></tr>'+
                        '</table><div class="table_carga_linha"></div>';
                }
            };
            $.extend(optionsDefault, options);
            
            $("#div_exibe_cargas").myPaginator(optionsDefault);
        }else{
            $("#div_exibe_cargas").myPaginator("update", options);
        }
        $("#exibe_carga").show();
        $("#detalhe_carga").hide();
        
    }
    
    var clientes = new Array();
    
    function detalhar_carga(index, row){
        if (clientes[row.CLI_ID] == undefined){
            $.ajax({
              type: 'GET',
              async: true,
              url: "ajax.php?action=consulta_cliente&id="+row.CLI_ID,
              success: function(response){
                  clientes[row.CLI_ID] = response;
                  $.extend(row, response);
                  processar_detalhe_carga(index, row);
              },
              dataType: "json"
            });
        }else{
            $.extend(row, clientes[row.CLI_ID]);
            processar_detalhe_carga(index, row);
        }
        
    }
    
    function processar_detalhe_carga(index, row){
        var conteudo = '<table cellspacing="0" width="100%">'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Origem:</td><td width="180" style="font-weight: bold"><a title="Cargas próximas a esta localidade" href="javascript:consulta_generica(\'proximidade\', {CID_ID:\''+row.CID_ORIGEM_ID+'\',EST_SIGLA:\''+row.CAR_ORIGEM.split('/')[1]+'\'});">'+row.CAR_ORIGEM+'</a></td><td class="td_tipo" width="80">Ve&iacute;culo:</td><td width="140">'+row.CAR_VEICULO+'</td><td class="td_tipo" width="45">Data:</td><td>'+row.CAR_DATA_REGISTRO+'</td><td rowspan="5" class="td_logo_cliente" width="100"><img src="imagens/clientes/cliente_100x75.php?id='+row.CLI_ID+'" width="100" height="75" style="vertical-align: middle"/></td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Destino:</td><td width="180" style="font-weight: bold"><a title="Cargas próximas a esta localidade" href="javascript:consulta_generica(\'proximidade\', {CID_ID:\''+row.CID_DESTINO_ID+'\',EST_SIGLA:\''+row.CAR_DESTINO.split('/')[1]+'\'});">'+row.CAR_DESTINO+'</a></td><td class="td_tipo" width="80">Carroceria:</td><td width="140">'+row.CAR_CARROCERIA+'</td><td class="td_tipo" width="45">Peso:</td><td>'+row.CAR_PESO+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Produto:</td><td width="180">'+row.CAR_PRODUTO+'</td><td class="td_tipo" width="80">Rastreado:</td><td width="140">'+row.CAR_RASTREADO+'</td><td class="td_tipo" width="45">Valor:</td><td>'+row.CAR_VALOR+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Especie:</td><td width="100">'+row.CAR_ESPECIE+'</td><td class="td_tipo" width="80">Validade:</td><td colspan="3" style="font-weight: bold" width="140">'+(row.CAR_FINALIZADA == 0 ? row.CAR_DATA_VALIDADE : "<span style='color:#f00;'> Carga finalizada em "+row.CAR_DATA_VALIDADE+"</span>") +'</td></tr>'+
            '<tr><td class="td_tipo" width="90">Observa&ccedil;&atilde;o:</td><td colspan="5">'+row.CAR_OBSERVACAO+'</td></tr>'+
        '</table><div class="table_carga_linha"></div>';
        
        conteudo += '<table cellspacing="0" width="100%">'+
            '<tr class="tr_carga"><td class="td_tipo">Embarcador:</td><td colspan="3" style="font-weight: bold"><a title="Outras cargas desse embarcador" href="javascript:consulta_generica(\'embarcador\', {CLI_FANTASIA:\''+row.CLI_FANTASIA+'\'});">'+row.CLI_FANTASIA+'</a></td><td class="td_tipo">MSN:</td><td colspan="3">'+row.CLI_MSN+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo">E-mail:</td><td colspan="3">'+row.CLI_EMAIL+'</td><td class="td_tipo">SKYPE:</td><td colspan="3">'+row.CLI_SKYPE+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Telefone 1:</td><td width="100">'+row.CLI_TEL1+'</td><td class="td_tipo" width="80">Telefone 2:</td><td width="100">'+row.CLI_TEL2+'</td><td class="td_tipo" width="80">Celular:</td><td width="100">'+row.CLI_CELULAR+'</td><td class="td_tipo" width="80">Fax:</td><td width="100">'+row.CLI_FAX+'</td></td></tr>'+
        '</table><div class="table_carga_linha"></div>';
        
        $("#conteudo_detalhe_carga").html(conteudo);
        
        if(perfil == "administrador" && row.CAR_FINALIZADA == 0){
            $(".acoes_button").show();
            $(".acoes_button").unbind("click");
            $("#visualizar_button").click(function(){window.open("index.php?page=carga_alterar&id="+row.CAR_ID);});
            $("#prorrogar_button").click(function(){prorrogar_carga(row.CAR_ID);});
            $("#finalizar_button").click(function(){finalizar_carga(row.CAR_ID);});
        }else if(perfil == "cliente" && !row.CAR_FINALIZADA == 0){
            if(CLI_ID == row.CLI_ID){
                $(".acoes_button").show();
                $(".acoes_button").unbind("click");
                $("#visualizar_button").click(function(){window.open("index.php?page=carga_alterar&id="+row.CAR_ID);});
                $("#prorrogar_button").click(function(){prorrogar_carga(row.CAR_ID);});
                $("#finalizar_button").click(function(){finalizar_carga(row.CAR_ID);});
            }else{
                $(".acoes_button").unbind("click");
                $(".acoes_button").hide();
                
            }
        }else{
            $(".acoes_button").hide();
            $(".acoes_button").unbind("click");
        }
        
        $("#exibe_carga").hide();
        $("#detalhe_carga").show();
        
        var mapa_inicializado = false;
        if(! mapa_inicializado){
            initialize();
            mapa_inicializado = true;
        }
        calcRoute(row);
        $("#comment_facebook").html('<div class="corpo_conteudo">'+
                    '<div class="fb-comments" data-href="http://www.vantilcargas.com.br/index.php?page=carga_visualiza&id='+row.CAR_ID+'" data-width="760" data-num-posts="10"></div>'+
                    '</div>');
        FB.XFBML.parse(document.getElementById('comment_facebook'));
        $(".ajax-loading").hide();
    }
    
    function consulta_generica(tipo, valores){
        if (tipo == 'embarcador'){
            var form = document.consulta_embarcador;
            form.CLI_FANTASIA.value = valores.CLI_FANTASIA;
            
            var options = {
                url : "ajax.php?action=carga_consulta_embarcador",
                formulario : form
            };
            executaPaginador(options);
            $('#tab-container').easytabs('select', '#tab1-embarcador');
        }else if (tipo == 'proximidade'){
            var form = document.consulta_proximidade;
            $(form.EST_SIGLA).val(valores.EST_SIGLA);
            $(form.TIPO).val("ambos");
            $(form.DISTANCIA).val("100");
            
            buscaCidade('prox_cidade', valores.EST_SIGLA, valores.CID_ID);

            var options = {
                url : "ajax.php?action=carga_consulta_proximidade",
                formulario : form
            };
            executaPaginador(options);
            $('#tab-container').easytabs('select', '#tab1-proximidade');
        }
    }
    
    function consultar_completa(){
        $("#titulo_div_exibe_cargas").html("Resultado da Busca Completa");
        executaPaginador({
            formulario: document.consulta_completa,
            url: "ajax.php?action=carga_consulta_localidade"
        });
        return false;
    }
    
    function consultar_localidade(){
        $("#titulo_div_exibe_cargas").html("Resultado da busca por Localidade");
         executaPaginador({
            formulario: document.consulta_localidade,
            url: "ajax.php?action=carga_consulta_localidade"
        });
        return false;
    }
    
    function consultar_proximidade(){
        $("#titulo_div_exibe_cargas").html("Resultado da busca por Proximidade");
        if ($("#prox_cidade").val() == ""){
            alert("Selecione uma cidade");
            return false;
        }
        executaPaginador({
            formulario: document.consulta_proximidade,
            url: "ajax.php?action=carga_consulta_proximidade"
        });
        return false;
    }
    
    function consultar_embarcador(){
        $("#titulo_div_exibe_cargas").html("Resultado da busca por Embarcador");
        if ($("#input_embarcador").val() == ""){
            alert("Digite um valor para embarcador");
            return false;
        }
        executaPaginador({
            formulario: document.consulta_embarcador,
            url: "ajax.php?action=carga_consulta_embarcador"
        });
        return false;
    }
    
    // Google maps
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var brasil = new google.maps.LatLng(-14.790141, -51.37207);

    
    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var mapOptions = {
//        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
//        center: brasil
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      directionsDisplay.setMap(map);
    }

    function calcRoute(row) {
      var request = {
          origin: new google.maps.LatLng(eval(row.CID_ORIGEM_LAT), eval(row.CID_ORIGEM_LNG)),
          destination: new google.maps.LatLng(eval(row.CID_DESTINO_LAT), eval(row.CID_DESTINO_LNG)),
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            $("#map_mensagem").hide();
        }else if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
            var mapOptions = {
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: brasil
            }
            map.setOptions(mapOptions);
            
            var markerOrigem = new google.maps.Marker({
                position: new google.maps.LatLng(eval(row.CID_ORIGEM_LAT), eval(row.CID_ORIGEM_LNG)),
                title: row.CAR_ORIGEM
            });
            
            var markerDestino = new google.maps.Marker({
                position: new google.maps.LatLng(eval(row.CID_DESTINO_LAT), eval(row.CID_DESTINO_LNG)),
                title: row.CAR_DESTINO
            });

            // To add the marker to the map, call setMap();
            markerOrigem.setMap(map);
            markerDestino.setMap(map);
            $("#map_mensagem").html("Desculpe-nos, o google n&atilde;o pode encontrar uma rota entre esses destinos!").show();
        }
      });
    }
    
    function finalizar_carga(CAR_ID){
        var link = "action.php?action=ajax_carga_finaliza";
        $.ajax({
            type: "POST",
            url: link,
            async: true,
            data: {"CARGAS": {0:{"CAR_ID":CAR_ID}}},
            success: function(response) {
                showInfoMessage(response, 4000);
                $("#div_exibe_cargas").myPaginator('reload');
           }});
    }
    
    function prorrogar_carga(CAR_ID){
        var link = "action.php?action=ajax_carga_prorroga";
        $.ajax({
            type: "POST",
            url: link,
            async: true,
            data: {"CARGAS": {0:{"CAR_ID":CAR_ID}}},
            success: function(response) {
                showInfoMessage(response, 4000);
                $("#div_exibe_cargas").myPaginator('reload');
            }});
    }
    

</script>


<div class="div_conteudo" >
    <img src="./imagens/lupa_128x128.png" alt="" width="100" height="100" style="float: right;"/>
<!--    <span class="titulo_conteudo" style="width: 620px">Filtre seu resultado</span>-->
    <div class="corpo_conteudo">
        
    <div id="tab-container" class="tab-container">
        <ul class='etabs'>
            <li class='tab'><a href="#tab1-localidade">Localidade</a></li>
            <li class='tab'><a href="#tab1-proximidade">Proximidade</a></li>
            <li class='tab'><a href="#tab1-embarcador">Embarcador</a></li>
            <li class='tab'><a href="#tab1-completa">Busca Completa</a></li>
        </ul>
        <div class="panel-container" style="width: 610px">
            <div  id="tab1-localidade">
                <form style="margin: 0" name="consulta_localidade" onSubmit="return consultar_localidade();">
                    <table border="0">
                        <tr>
                            <td>
                                <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Origem da carga</span><br/>
                                <select id="origem_uf" name="EST_ORIGEM_SIGLA" onchange="buscaCidade('origem_cidade',this.value);">
                                    <option value=""></option>
                                    <?php
                                        include $app.'dao/dao_localidade.php';

                                        $dao_localidade = new dao_localidade();
                                        $result = $dao_localidade->selectAllUF();

                                        $UF = "";
                                        foreach ($result as $row){
                                          $UF .= "<option value='".$row['EST_SIGLA']."'>".$row['EST_SIGLA']."</option>";
                                        }
                                        echo $UF;
                                    ?>
                                </select >
                                <select style="width: 200px" id="origem_cidade" name="CID_ORIGEM_ID">
                                </select>
                            </td>
                            <td>
                                <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Destino da carga</span><br/>
                                <select id="destino_uf" name="EST_DESTINO_SIGLA" onchange="buscaCidade('destino_cidade',this.value);">
                                    <option value=""></option>
                                    <?php
                                        echo $UF;
                                    ?>
                                </select>
                                <select style="width: 200px" id="destino_cidade" name="CID_DESTINO_ID">
                                </select>
                            </td>
                            <td style="vertical-align: bottom"><input type="submit" value="Localizar"/></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div  id="tab1-proximidade">
                <form style="margin: 0" name="consulta_proximidade" onSubmit="return consultar_proximidade();">
                    <table border="0">
                        <tr>
                            <td>
                                <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Localidade</span><br/>
                                <select id="prox_uf" name="EST_SIGLA" onchange="buscaCidade('prox_cidade',this.value);">
                                    <option value=""></option>
                                    <?php
                                        echo $UF;
                                    ?>
                                </select >
                                <select style="width: 200px" id="prox_cidade" name="CID_ID">
                                    <option value="">&nbsp;</option>
                                </select>
                            </td>
                            <td>
                                <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Tipo</span><br/>
                                <select id="prox_tipo" name="TIPO">
                                    <option value="origem">Origem</option>
                                    <option value="destino">Destino</option>
                                    <option value="ambos">Ambos</option>
                                </select>
                            </td>
                            <td>
                                <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Dist&acirc;ncia</span><br/>
                                <select id="prox_distancia" name="DISTANCIA">
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="200">200</option>
                                </select>
                            </td>
                            <td style="vertical-align: bottom"><input type="submit" value="Localizar"/></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="tab1-embarcador">
                <form style="margin: 0" name="consulta_embarcador" onSubmit="return consultar_embarcador();">
                    <table border="0">
                        <tr>
                            <td><span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Nome do Embarcador</span><br/>
                                <input name="CLI_FANTASIA" id="input_embarcador" size="50"/></td><td style="vertical-align: bottom"></td>
                            <td style="vertical-align: bottom"><input type="submit" value="Localizar"/></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="tab1-completa">
                <form style="margin: 0" name="consulta_completa" class="formularios" onSubmit="return consultar_completa();">
                    <table>
                        <tr><td>Data de Registro:</td><td><input name="CAR_DATA_REGISTRO" type="text" field_type="date"/></td></tr>
                        <tr><td>Data de Validade:</td><td><input name="CAR_DATA_VALIDADE" type="text" field_type="date"/></td></tr>
                        <tr><td>
                        Origem:</td><td><select name="EST_ORIGEM_SIGLA" onchange="buscaCidade('origem_cidade_completa',this.value);">
                                <option value=""></option>
                                <?php
                                    echo $UF;
                                ?>
                            </select> <select style="width: 200px" name="CID_ORIGEM_ID" id="origem_cidade_completa"></select>
                        </td></tr>
                        <tr><td>
                        Destino:</td><td><select name="EST_DESTINO_SIGLA" onchange="buscaCidade('destino_cidade_completa',this.value);">
                                <option value=""></option>
                                <?php
                                    echo $UF;
                                ?>
                            </select> <select style="width: 200px" name="CID_DESTINO_ID" id="destino_cidade_completa"></select>
                        </td></tr>
                        <tr><td>Produto:</td><td><input type="text" name="CAR_PRODUTO" field_type="string"/></td></tr>
                        <tr><td>Especie:</td><td><input type="text" name="CAR_ESPECIE" size="50" field_type="string"/></td></tr>
                        <tr><td>Peso:</td><td><input id="peso" type="text" name="CAR_PESO" field_type="number"/></td></tr>
                        <tr><td>Valor:</td><td><input id="valor" type="text" field_type="money" name="CAR_VALOR"/></td></tr>
                        <tr><td>Ve&iacute;culo:</td><td><input type="text" name="CAR_VEICULO" field_type="string"/></td></tr>
                        <tr><td>Carroceria:</td><td><input type="text" name="CAR_CARROCERIA" field_type="string"/></td></tr>
                        <tr><td>Rastreado:</td>
                            <td><select name="CAR_RASTREADO">
                                    <option value=""></option>
                                    <option value="0">N&atilde;o</option>
                                    <option value="1">Sim</option>
                                </select>
                            </td></tr>
                        <tr><td colspan="2"><br/><input type="submit" value="Localizar"/></td></tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
        </div>
    <br/>
<div class="div_conteudo" id="exibe_carga" style="display: none">
<span class="titulo_conteudo" id="titulo_div_exibe_cargas">&Uacute;ltimas Cargas Cadastradas</span>
<div class="corpo_conteudo" id="div_exibe_cargas">
</div>
</div>
    
<div class="div_conteudo" id="detalhe_carga" style="display: none">
    <span class="titulo_conteudo">Detalhes da carga</span>
    <div class="corpo_conteudo" id="conteudo_detalhe_carga">
    </div>
    
    <div id="map_canvas" style="width: auto; height: 400px"></div>
    <div id="map_mensagem" style="width: auto; text-align: center; color: #060; font-weight: bold; font-size: 15px; padding: 4px 0"></div>
    <div class="table_carga_linha"></div>
    <div class="corpo_conteudo" style="text-align: right">
        <form>
            <input type="button" id="voltar_button" value="Voltar" onclick="$('#detalhe_carga').hide();$('#exibe_carga').show();"/>
            <input type="button" id="inicio_button" value="Inicio" onclick="executaPaginador();$('#inicio_button').hide();$('#voltar_button').show();" style="display: none"/>
            <input type="button" class="acoes_button" id="visualizar_button" value="Visualizar" style="display: none"/>
            <input type="button" class="acoes_button" id="prorrogar_button" value="Prorrogar" style="display: none"/>
            <input type="button" class="acoes_button" id="finalizar_button" value="Finalizar" style="display: none"/>
        </form>  
    </div>
    <br/>
    <span class="titulo_conteudo">Deixe um coment&aacute;rio para esta carga</span>
    <div class="corpo_conteudo" id="comment_facebook"></div>
</div>
    
    
<div id="erro"></div>
</div>